<template>
  <div style="width: 100%; height: 100%" class="bg">
    <div class="login-box">
      <a-form-model
        ref="ruleForm"
        id="components-form-demo-normal-login"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item ref="name" prop="name">
          <a-input
            v-model="form.name"
            @blur="
              () => {
                $refs.name.onFieldBlur();
              }
            "
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0, 0, 0, 0.25)"
            />
          </a-input>
        </a-form-model-item>
        <a-form-model-item has-feedback ref="password" prop="password">
          <a-input-password v-model="form.password">
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
          /></a-input-password>
        </a-form-model-item>
        <a-form-model-item ref="yzm" prop="yzm">
          <a-input v-model="form.yzm" allow-clear>
            <span slot="suffix" v-html="src">1</span>
          </a-input>
        </a-form-model-item>
        <!-- <a-form-model-item has-feedback ref="password1" prop="password1">
          <a-input-password v-model="form.password1">
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0, 0, 0, 0.25)"
          /></a-input-password>
        </a-form-model-item> -->
        <a-form-model-item>
          <a-checkbox v-model="form.check" style="color: white">
            Remember me
          </a-checkbox>
          <a class="login-form-forgot" href=""> Forgot password </a>
          <a-button
            type="primary"
            @click.prevent="onSubmit"
            class="login-form-button"
          >
            Log in
          </a-button>
          <span style="color: white">Or</span>
          <a href=""> register now! </a>
          <a-button class="reset" type="primary" @click.prevent="resetForm">
            reset
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { message } from "ant-design-vue";
const htp = axios.create({});
htp.interceptors.response.use(
  (response) => {
    return Promise.resolve(response.data);
  },
  (err) => {
    return Promise.reject(err);
  }
);
export default {
  data() {
    return {
      form: {
        name: "admin",
        password: "1234",
        password1: "1234",
        check: false,
        yzm: "",
      },
      yzm: "",
      src: "",
      rules: {
        name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input Activity password",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
        password1: [
          {
            required: true,
            message: "Please input  password",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
        yzm: [
          {
            required: true,
            message: "Please input yzm",
            trigger: "blur",
          },
        ],
      },
    };
  },
  props: {
    rowItem: {
      type: Object,
    },
  },
  created() {
    this.get_yzm();
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          console.log(this.form);
          // if (
          //   this.yzm.toLocaleLowerCase() !== this.form.yzm.toLocaleLowerCase()
          // ) {
          //   message.error("验证错误");
          //   this.get_yzm();
          //   return;
          // }
          // let data = await htp({
          //   url: "/a",
          //   method: "get",
          // });
          // console.log(data);
          sessionStorage.setItem("user", JSON.stringify({ name: "admin" }));
          this.$router.push({
            path: "/entry",
            query: {
              id: "2",
            },
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    get_yzm() {
      axios({
        url: "/yzm",
        method: "get",
      }).then((res) => {
        console.log(res);
        this.src = res.data;
        this.yzm = res.headers.yzm;
      });
    },
  },
};
</script>
<style lang="scss">
.login-box {
  position: absolute;
  height: 40%;
  width: 30%;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  #components-form-demo-normal-login .login-form-forgot,
  .reset {
    float: right;
  }
  #components-form-demo-normal-login .login-form-button {
    width: 100%;
  }
  .ant-input {
    background-color: rgb(193, 213, 243);
  }
}
.bg {
  background-image: url("/bg.jpg");
  position: fixed;
  background-size: cover;
}
</style>
